<template>
  <el-dialog v-model="dialogVisible" style="width:500px; height: 200px;" align-center :before-close="handleClose">
    <template #title>
      <div style="display: flex; align-items: center;">
        <img src="/img/common/warning.png" alt="" >
        <span style="margin-left: 20px; font-size: 18px">审核确认</span>
      </div>
    </template>
    <span style="margin-left: 45px; font-size: 15px">确定要审核通过吗？</span>
    <template #footer style="position: relative;">
      <div style="position: absolute; right: 20px; bottom: 25px">
        <el-button @click="handleClose" size="large">取消</el-button>
        <el-button @click="succeed" type="primary" size="large">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog title="驳回确认" v-model="rejectVisible" style="width:500px; height: 300px; padding:10px;" :before-close="handleClose" >
    <el-form label-width="80px" label-position="left" style="padding:10px;">
      <el-form-item>
        <template #label>
          驳回原因<span class='red-star'>*</span>
        </template>
        <el-input
            style="width: 400px;position: relative;top:10px"
            :rows="6"
            type="textarea"
            placeholder="请输入驳回原因"
            v-model="rejectReason"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose" size="large">取消</el-button>
      <el-button @click="reject" type="primary" size="large">确定</el-button>
    </template>
  </el-dialog>
  <el-card style="width: 80%; height: 95%; margin:20px auto 0px; padding: 5px 10px;">
    <div style="font-size: 20px;color: black; margin-bottom: 20px; position: relative">
      <button style="width: 7px; height: 20px; border-radius: 3px; background-color: rgb(41, 132, 248); border-width: 0; padding: 0"></button>
      <span style="margin-left: 10px;">签约详情</span>
      <img :src="imageType" alt="" style="position: absolute; top: 12px; left: 120px">
    </div>

    <hr>

    <div style="font-size: 18px;color: black; font-weight: 450; margin-bottom: 20px;">
      <span>居民信息</span>
    </div>

    <el-form label-width="80px" label-position="left" :inline="true">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="姓名">
            <el-text class="mx-1" size="large" @click="router.push('/residentDetail?id='+dataForm.patientId)" style="color: rgb(41, 132, 248);cursor: pointer;" >{{dataForm.name}}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="身份证号">
            <el-text class="mx-1" size="large">{{dataForm.idcard}}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别">
            <el-text class="mx-1" size="large">{{dataForm.gender}}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年龄">
            <el-text class="mx-1" size="large">{{dataForm.age}}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="联系电话">
            <el-text class="mx-1" size="large">{{dataForm.phone}}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="现居地">
            <el-text class="mx-1" size="large">{{dataForm.address}}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="家庭成员">
        <el-card v-for="item in relationship" style="width: 220px; height: 90px; margin-right: 30px; position: relative;">
          <img v-if="item.gender==1" src="/img/common/male.png" alt="" width="50px" height=50px style="position: relative; bottom: 8px">
          <img v-else src="/img/common/female.jpg" alt="" width="50px" height=50px style="position: relative; bottom: 8px">
          <div style="width: 100px; height: 50px; color: #999999; margin-left: 15px; display: inline-block; position: relative; bottom: 5px">
            <span style="font-size: 18px; color: black;">{{ item.name }}</span>
            &nbsp;
            <span>{{ item.age }}岁</span>
            <div>
              <span>关系：</span>
              <span>{{ item.relation }}</span>
            </div>
          </div>
          <img src="/img/common/tip.png" alt="" style="transform: rotate(-25deg); position: absolute; top: 25px">
        </el-card>
      </el-form-item>
    </el-form>

    <hr>

    <div style="font-size: 18px;color: black; font-weight: 450; margin-bottom: 20px;">
      <span>签约信息</span>
    </div>
    <el-form label-width="80px" label-position="left" :inline="true">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="签约编号">
            <el-text class="mx-1" size="large" style="color: black">{{dataForm.signedContractId}}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="签约状态">
            <el-text v-if="statusType==1" class="mx-1" size="large" style="color: rgb(40, 208, 148)">待审核</el-text>
            <el-text v-if="statusType==2" class="mx-1" size="large" style="color: rgb(253, 219, 137)">审核通过，等待用户支付</el-text>
            <el-text v-if="statusType==3" class="mx-1" size="large" style="color: rgb(250, 116, 150)">已驳回，等待居民修改</el-text>
            <el-text v-if="statusType==4" class="mx-1" size="large" style="color: rgb(40, 208, 148)">已完成</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签约机构">
            <el-text class="mx-1" size="large">{{institution}}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="签约服务">
            <el-text class="mx-1" size="large" style="color: black">{{item}}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="费用">
            <el-text class="mx-1" size="large" style="color: black">{{fee}}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签约医生">
            <el-text class="mx-1" size="large">{{doctor}}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="申请时间">
            <el-text class="mx-1" size="large" style="color: black">{{dataForm.applicatedTime}}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="生效时间">
            <el-text class="mx-1" size="large" style="color: black">{{dataForm.startValidatingDate}}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="签约备注">
        <el-text class="mx-1" size="large" style="color: black">{{dataForm.note}}</el-text>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button v-if="statusType==1 || statusType==2" type="primary" @click="router.push('/editSigning?id=' + signId)" style="width: 130px; height: 40px; font-size: 15px;">编辑签约信息</el-button>
      <el-button v-if="statusType==1 || statusType==2" type="success" @click="successButton" style="width: 110px; height: 40px; font-size: 15px;">{{buttonContent}}</el-button>
      <el-button v-if="statusType==1" type="danger" @click="rejectVisible = true;" style="width: 110px; height: 40px; font-size: 15px;">驳回</el-button>
      <el-button @click="handleReturn" style="width: 70px; height: 40px; font-size: 15px;">返回</el-button>
    </template>
  </el-card>
</template>

<script setup>
import {onMounted, ref, computed} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";

const dialogVisible = ref(false);
const rejectVisible = ref(false);
const handleClose = ()=>{
  dialogVisible.value = false;
  rejectVisible.value = false;
  rejectReason.value = '';
}

const imageType = ref('/img/common/pending_approval.png');
const statusType = ref();
const buttonContent = ref('');
const changeStatus = (type)=>{
  if (type == 1) {
    imageType.value = '/img/common/pending_approval.png';
    statusType.value = type;
    buttonContent.value = '审核通过';
  }
  else if (type == 2) {
    imageType.value = '/img/common/wait_paying.png';
    statusType.value = type;
    buttonContent.value = '完成支付';
  }
  else if (type == 3) {
    imageType.value = '/img/common/reject.png';
    statusType.value = type;
  }
  else if (type == 4) {
    imageType.value = '';
    statusType.value = type;
  }
}
const succeed = ()=>{
  dialogVisible.value = false;
  ElMessage.success('审核通过！');
  changeStatus(2);
  updateStatus('待支付');
}
const rejectReason = ref('');
const reject = ()=>{
  if (rejectReason.value == '') {
    ElMessage.error('请输入驳回理由！');
    return;
  }
  handleClose();
  ElMessage.success('已驳回！')
  changeStatus(3);
  updateStatus('已驳回');
}
const successButton = ()=>{
  if (statusType.value == 1) {
    dialogVisible.value = true;
  }
  else if (statusType.value == 2) {
    ElMessage.success('支付完成！');
    handleReturn();
    updateStatus('已完成');
  }
}


let signId = '';
const dataForm = ref({});
const relationship = ref([]);
const institutionArr = ref([]);
const doctorArr = ref([]);
const serviceItemsArr = ref([]);
const fee = ref();
onMounted(() => {
  loadData(institutionArr,'institution');
  loadData(doctorArr,'user');
  loadData(serviceItemsArr,'items');
});
const institution = computed(() => {
  for (let i = 0; i < institutionArr.value.length; i++) {
    if (institutionArr.value[i].id == dataForm.value.signedInstitutionId) {
      return institutionArr.value[i].name;
    }
  }
  return dataForm.value.signedInstitutionId;
});
const doctor = computed(() => {
  for (let i = 0; i < doctorArr.value.length; i++) {
    if (doctorArr.value[i].id == dataForm.value.doctorId) {
      return doctorArr.value[i].doctorName;
    }
  }
  return dataForm.value.doctorId;
});
const item = computed(() => {
  for (let i = 0; i < serviceItemsArr.value.length; i++) {
    if (serviceItemsArr.value[i].id == dataForm.value.serviceItemsId) {
      fee.value = serviceItemsArr.value[i].fee;
      return serviceItemsArr.value[i].name;
    }
  }
  return dataForm.value.serviceItemsId;
});

onMounted(() => {
  signId = new URLSearchParams(window.location.search).get('id');
  axios.get(BASE_URL+'/hhmc/sign/select/'+signId).then((response)=>{
    if(response.data.code == 2000){
      dataForm.value = response.data.data;
      if (dataForm.value.status == '待审核') {
        changeStatus(1);
      }
      else if (dataForm.value.status == '待支付') {
        changeStatus(2);
      }
      else if (dataForm.value.status == '已驳回') {
        changeStatus(3);
      }
      else if (dataForm.value.status == '已完成') {
        changeStatus(4);
      }
      axios.get(BASE_URL + '/hhmc/patient/getFamilyInfo/'+dataForm.value.patientId).then((response) => {
        if (response.data.code == 2000) {
          relationship.value = response.data.data;
        } else {
          ElMessage.error(response.data.msg);
        }
      })
    }else{
      ElMessage.error(response.data.msg);
    }
  })
});

const updateParams = ref({id:'', status:''});
const updateStatus = (status)=>{
  updateParams.value.id = signId;
  updateParams.value.status = status;
  let data = qs.stringify(updateParams.value);
  axios.post(BASE_URL+'/hhmc/sign/update', data).then((response)=>{
      console.log(response.data);
    if(response.data.code == 2000){
      console.log(response.data.data);
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

const handleReturn = ()=>{
  router.push('/signing');
}

</script>

<style scoped>
  hr {
    background-color: rgb(242,247,251);
    height:1px;
    border:none;
    margin-bottom: 20px
  }

  :deep(.el-form-item__label) {
    height: 45px;
    line-height: 45px;
    color: #999999;
    font-size: 15px;
  }

  .red-star {
    color: red;
    font-size: 16px;
    font-weight: 300;
    margin-left: 1px;
  }
</style>